<template>
	<view style="background-color: #f1f1f1;height: 100vh;">
		<u-search v-model="keyword" :showAction="true" actionText="搜索"
		 :animation="false" placeholder="材料/设备关键字搜索" @custom="custom"></u-search>

		<!-- <view class="top" style="display: initial;"> -->
			<view class="two" style="">
				<view class="" style="">
					<view class="two-oneLeft" style="width: 240rpx;">明细 :</view>
					<view class="table-container" style="margin-left: 0rpx;">
						<uni-table ref="table" border stripe type="selection" @selection-change="selectionChange"
							emptyText="暂无更多数据" style="height: 938rpx;">
							<uni-tr >
								<!-- <uni-th width="100" filter-type="search" @filter-change="filterchange" :sortable="false">地点</uni-th> -->
								<uni-th width="100" :sortable="false">件号</uni-th>
								<uni-th width="100" filter-type="search" @filter-change="filterchange" :sortable="false">设备号</uni-th>
								<uni-th width="100" filter-type="search" @filter-change="filterchange" :sortable="false">产品编码</uni-th>
								
								<uni-th width="100" :sortable="false">产品名称</uni-th>
								<uni-th width="100" :sortable="false">数量</uni-th>
								<uni-th width="100" :sortable="false">材质/牌号</uni-th>
								<uni-th width="100" :sortable="false">规格型号</uni-th>
								<uni-th width="100" :sortable="false">技术标准</uni-th>
								<uni-th width="100" :sortable="false">附加技术要求</uni-th>
								<uni-th width="100" :sortable="false">材检号</uni-th>
								<uni-th width="100" :sortable="false">锻件材检号</uni-th>
								
								<uni-th width="100" :sortable="false">库位类型</uni-th>
								<uni-th width="100" :sortable="false">库位</uni-th>
								
								
							</uni-tr>
							<uni-tr v-for="(item,index) in tableData" id='index' style="">
								<uni-td>{{item.YJH}}</uni-td>
								<uni-td>{{item.CTRNUM}}</uni-td>
								<uni-td>{{item.ITMREF}}</uni-td>
								<uni-td>{{item.ITMDES1}}</uni-td>
								
								<uni-td>{{item.YKQTY}}</uni-td>
								<uni-td>{{item.YCZPH}}</uni-td>
								<uni-td>{{item.YGGXX}}</uni-td>
								<uni-td>{{item.YJSBZ}}</uni-td>
								<uni-td>{{item.YFJJSYQ}}</uni-td>
								<uni-td>{{item.LOT}}</uni-td>
								<uni-td>{{item.SERNUM}}</uni-td>
								<uni-td>{{item.LOCTYP}}</uni-td>
								<uni-td>{{item.LOC}}</uni-td>
								
							</uni-tr>
						</uni-table>
						<view class="uni-pagination-box" style="">
							<uni-pagination show-icon :page-size="pageSize"
								:current="pageCurrent" :total="total"
								@change="change"/>
						</view>
					</view>
				</view>
			</view>
		<!-- </view> -->
		<view class="btnBox" style="margin-top: 80rpx;">
			<view class="btnBox-right" style="margin-left: 510rpx;">
				<u-button class="rgzxBox-btn2" type="primary"
					@click="okBtn">确认</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import * as dd from 'dingtalk-jsapi'
	export default {
		data() {
			return {
				dataFormat:{},
				STOFCY:"",
				isFilter:false,
				keyword:'',
				userInfo: {},
				isClick: false,
				searchVal: '',
				tableData: [],
				tableDataAll: [],
				dataList:[],
				// 每页数据量
				pageSize: 100,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				total: 0,
				loading: false
			}
		},
		onLoad(query) {
			if(query.dataFormat){
				var dataT= JSON.parse(query.dataFormat);
				this.dataFormat = dataT.dataFormat;
				this.dataList = dataT.dataList;
				this.init()
			}
		},
		methods: {
			async custom(val){
				this.isFilter=false
				this.$refs.table.clearSelection()
				this.selectedIndexs=[]
				var loctyp=this.dataFormat.LOCTYP
				if (loctyp!="" && /_/.test(loctyp)){
					loctyp=loctyp.split('_')[0]
				}
				let GRP = {GRP1: [{
					ITMREF:val,
					STOFCY:this.dataFormat.FCY,
					LOCTYP:loctyp,
				}]}
				let res = await this.$api.x3.x3request("WSLISTSQS",GRP)
				// 请求成功的处理逻辑
				let resR1 = JSON.parse(res.message)
				this.tableDataAll= resR1.GRP1
				this.getData(1)
			},
			// 多选处理
			selectedItems() {
				return this.selectedIndexs.map(i => this.tableData[i])
			},
			// 多选
			selectionChange(e) {
				this.selectedIndexs = e.detail.index
			},
			filterchange(e){
				this.isFilter=true
				//console.log("filter-change",e)
				this.$refs.table.clearSelection()
				this.searchVal=e.filter
				this.search()
			},
			// 分页触发
			change(e) {
				
				this.$refs.table.clearSelection()
				this.selectedIndexs.length = 0
				this.getData(e.current)
			},
			// 搜索
			search() {
				this.getData(1, this.searchVal)
			},
			// 获取数据
			getData(pageCurrent, value = '') {
				this.loading = true
				this.pageCurrent = pageCurrent
				this.request({
					pageSize: this.pageSize,
					pageCurrent: pageCurrent,
					value: value,
					success: res => {
						// console.log('data', res);
						this.tableData = res.data
						this.total = res.total
						this.loading = false
					}
				})
			},
			// 伪request请求
			request(options) {
				var tableData = this.tableDataAll
				const { pageSize, pageCurrent, success, value } = options
				let total = tableData.length
				let data = tableData.filter((item, index) => {
					const idx = index - (pageCurrent - 1) * pageSize
					return idx < pageSize && idx >= 0
				})
				if (value) {
					data = []
					tableData.forEach(item => {
						if (item.ITMREF.indexOf(value) !== -1) {
							data.push(item)
						}
						if (item.CTRNUM.indexOf(value) !== -1) {
							data.push(item)
						}
					})
					total = data.length
				}
				setTimeout(() => {
					typeof success === 'function' &&
						success({
							data: data,
							total: total
						})
				}, 500)
			},
			async init(){
				this.isFilter=false
				var loctyp=this.dataFormat.LOCTYP
				if (loctyp && loctyp!="" && /_/.test(loctyp)){
					loctyp=loctyp.split('_')[0]
				}
				let GRP = {GRP1: [{
					STOFCY:this.dataFormat.FCY,
					LOCTYP:loctyp,
				}]}
				let res = await this.$api.x3.x3request("WSLISTSQS",GRP)
				// 请求成功的处理逻辑
				let resR1 = JSON.parse(res.message)
				this.tableDataAll= resR1.GRP1
				this.getData(1)
			},
			async okBtn(){
				 var djmx = this.selectedItems()
				 var dataT={}
				 dataT.dataModList=djmx
				 dataT.dataFormat=this.dataFormat
				 dataT.dataList=this.dataList
				 uni.navigateTo({url:"/pages/yssqPages/yssqPages?dataS="+JSON.stringify(dataT)})
			},
		}
	}
</script>

<style scoped>
	.dropdown-popup-right{
		right: auto;
	}
table{
	border-collapse: collapse;
	text-align: center;
}
table1,th,td{
	border: 1px solid gainsboro ;
}
.table-container {
  /* width: 620px; */
  overflow: visible;
	background-color: white;
	height: 1000rpx;display: contents;
}

table1 {
  width: 95%; /* 表格宽度占满容器 */
  table-layout: fixed; /* 固定表格布局 */
}

td1 {
  width: 25%; /* 每列宽度为容器宽度的四分之一 */
}
.top{
	width: 90%;
	background-color: white;
	position: relative;
	top: 50rpx;
	margin: 0 auto;
}
.topOne{
	height: 90rpx;
	border-bottom: 1px solid #ccc;
	display: flex;
	justify-content: space-between;
}
.topOne-left{
	width: 200rpx;
	font-weight: bold;
	font-size: 36rpx;
	text-align: center;
	padding-top: 20rpx;
}
.topOne-right{
	width: 400rpx;
	text-align: center;
	padding-top: 20rpx;
	color: gray;
	font-size: 28rpx;
}
.two{
	background-color: white;
}
.two-one{
	display: flex;
	justify-content: space-between;
}
.two-oneLeft{
	width: 190rpx;
	line-height: 68rpx;
	color: gray;
	text-align: center;
}
.two-oneRight{
	width: 350rpx;
	line-height: 68rpx;
	color: gray;
	text-align: center;
}
.two2{
	background-color: white;
}
.two2-one{
	height: 60rpx;
	display: flex;
	justify-content: space-between;
}
.two2-oneLeft{
	width: 190rpx;
	line-height: 68rpx;
	color: gray;
	text-align: center;
}
.two2-oneRight{
	width: 350rpx;
	line-height: 68rpx;
	color: gray;
	text-align: center;
}
.wxxx{
	width: 90%;
	background-color: white;
	position: relative;
	top: 100rpx;
	margin: 0 auto;
}
.wxxxOne{
	height: 90rpx;
	border-bottom: 1px solid #ccc;
	display: flex;
	justify-content: space-between;
}
.wxxxOne-left{
	width: 230rpx;
	font-weight: bold;
	font-size: 36rpx;
	text-align: center;
	padding-top: 20rpx;
}
.ddlcjlBox{
	width: 90%;
	position: relative;
	top: 160rpx;
	margin: 0 auto;
	background-color: white;
	font-size: 28rpx;
}
.ddlcjlBox-top{
	height: 70rpx;
	color: gray;
	text-align: center;
	font-size: 38rpx;
	padding-top: 15rpx;
}
.ddlcjlBox-two{
	height: 50rpx;
	display: flex;
	justify-content: space-between;
	color: gray;
	padding-left: 15rpx;
}
.ddlcjlBox-twoLeft{
	width: 320rpx;
}
.ddlcjlBox-twoCenter{
	width: 100rpx;
}
.ddlcjlBox-twoRightr{
	width: 100rpx;
}
.bcjlBox{
    width: 90%;
	height: 70rpx;
	position: relative;
	top: 200rpx;
	margin: 0 auto;
	background-color: white;
	color: gray;
	font-size: 32rpx;
	padding-top: 20rpx;
	padding-left: 20rpx;
}
.jlBox{
	width: 90%;
	height: 00rpx;
	position: relative;
	top: 100rpx;
	margin: 0 auto;
	background-color: white;
	font-size: 42rpx;
	padding-top: 0rpx;
	padding-left: 300rpx;
}
.btnBox{
	width: 100%;
	height: 80rpx;
	position: relative;
	top: 0rpx;
	left: -270rpx;
	display: flex;
	justify-content: space-between;
}
.btnBox-left{
	width: 350rpx;
	border-right: 1px solid #ccc;
}
.btnBox-right{
	width: 450rpx;
}
::v-deep .uni-select__selector-scroll2{
    max-height: 200rpx;
}
</style>
